<template>
  <view class="content">
    <!-- <view class="content-title">
        <view class="content-line"></view>
        <text class="index-title">泳票</text>
      </view> -->
    <view class="content-inner">
      <view class="inner-item" v-for="(item, index) in titckArr" :key="index">
        <view class="item-left">
          <image
            :src="
              item.image_url
                ? item.image_url
                : 'https://ya30images.hbwlife.com/wxmp/default-pic.png'
            "
          />
        </view>
        <view class="item-content">
          <view class="item-title">{{ item.ticket_title }}</view>
          <view class="ticket_times" v-if="item.status == 'PAYING'"
            >支付中</view
          >
          <view class="ticket_times" v-if="item.status == 'AVAILABLE'"
            >可使用</view
          >
          <view class="ticket_times" v-if="item.status == 'USED'">已使用</view>
          <view class="ticket_times" v-if="item.status == 'CANCELLED'"
            >已取消</view
          >
          <view class="center-box">
            <view class="ticket_times">{{ item.left_times }}</view>
            <view class="line"> / </view>
            <view class="one_day">{{ item.ticket_times }}</view>
          </view>
          <view class="price-wrap">
            <view class="item-price-box">
              <text class="item-unit">￥</text>
              <text class="item-price">{{ item.ticket_price / 100 }}</text>
            </view>
            <!-- <view class="pay-wrap">
              <view
                :class="['pay-btn', item.one_day == 1 ? '' : 'free-btn']"
                @tap="handleBuy(item.template_id)"
                >{{ item.one_day == 1 ? '抢购' : '领取' }}</view
              >
            </view> -->
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { request, requestData } from '@/utils/http.js'

export default {
  data() {
    return {
      titckArr: [],
    }
  },
  onShow() {
    this.initList()
  },
  methods: {
    //泳票列表
    initList(site_code) {
      request('/user/ticket/list', {
        carried_user_id: '',
        status: '',
      })
        .then((res) => {
          console.log(res)
          this.titckArr = res?.datas?.tickets
        })
        .catch((err) => {
          console.log(err)
        })
    },
  },
}
</script>

<style lang="scss">
.content {
  width: 100%;
  height: auto;
  min-height: 100vh;
  box-sizing: border-box;
  padding: 0 20rpx;
  background: $global-background-grey;
}

.content-title {
  width: 100%;
  height: auto;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  box-sizing: border-box;
  padding: 20rpx 0;
}

.content-line {
  width: 6rpx;
  height: 30rpx;
  background-color: $global-color-golden;
  border-radius: 2px;
  box-sizing: border-box;
}

.index-title {
  // font-weight: bold;
  color: $global-title-color-bold;
  font-size: 32rpx;
  margin-left: 22rpx;
  box-sizing: border-box;
}

.index-title-icon-wrap {
  width: 100%;
  height: auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 48rpx;
  box-sizing: border-box;
  background: #fff;
  padding: 20rpx;
}

.index-title-icon-item {
  width: 93rpx;
  height: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  box-sizing: border-box;
}

.index-title-icon {
  width: 93rpx;
  height: 93rpx;
  background-color: #fdfbeb;
  border-radius: 50%;
  font-size: 28rpx;
  color: $global-color-golden;
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
}

.index-title-icon-item-active .index-title-icon {
  background-color: $global-color-golden;
  color: #fff;
  box-sizing: border-box;
}

.index-title-icons {
  width: 64rpx;
  height: 64rpx;
}

.index-title-icon-txt {
  margin-top: 24rpx;
  color: #010101;
  font-size: 28rpx;
  box-sizing: border-box;
}

.content-inner {
  width: 100%;
  height: auto;
  overflow: hidden;
  box-sizing: border-box;
  padding-bottom: 34rpx;
  margin-top: 20rpx;
}

.inner-item {
  width: 100%;
  height: auto;
  padding: 10rpx;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 20rpx;
  background: #fff;
}

.item-left {
  width: 148rpx;
  height: auto;
}

.item-left image {
  width: 148rpx;
  height: 148rpx;
  box-sizing: border-box;
  object-fit: contain;
  border-radius: 12rpx;
}

.item-content {
  flex: 1;
  padding: 20rpx 0 20rpx 20rpx;
}

.center-box {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-top: 15rpx;
  color: $global-fontcolor-black;
}
.center-box .ticket_times,
.one_day {
  box-sizing: border-box;
  font-size: 28rpx;
}
.center-box .line {
  margin: 0 20rpx;
  width: 2rpx;
  height: auto;
  color: #969698;
}

.item-title {
  color: $global-title-color-bold;
  box-sizing: border-box;
}

// .item-desc {
//   color: $global-fontcolor-black;
//   margin-top: 8rpx;
//   box-sizing: border-box;
// }
.item-date {
  color: $global-fontcolor-black;
  margin-top: 8rpx;
  box-sizing: border-box;
  font-size: 28rpx;
}
.item-time {
  color: $global-fontcolor-black;
  margin-top: 8rpx;
  box-sizing: border-box;
  font-size: 28rpx;
}

.price-wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 15rpx;
}
.item-price-box {
  margin-top: 8rpx;
  box-sizing: border-box;
  color: #dd524d;
}
.item-unit {
  font-size: 24rpx;
}
.item-price {
  margin-left: 5rpx;
  font-size: 32rpx;
}
.item-qi {
  margin-left: 20rpx;
  font-size: 24rpx;
}
.pay-wrap {
  width: 133rpx;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.pay-btn {
  width: auto;
  height: auto;
  padding: 15rpx 30rpx;
  border-radius: 11rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  background: #e26f21;
  box-sizing: border-box;
  font-size: 28rpx;
}
.free-btn {
  background: #d5ad57;
}

.index-venue-item {
  align-items: flex-start;
}

.index-grid-wrap {
  width: 100%;
  height: auto;
  display: grid;
  gap: 20rpx;
  grid-template-columns: 1fr 1fr 1fr;
  /* 两列，每列宽度相等 */
  grid-template-rows: auto;
  /* 自动高度 */
  margin-top: 20rpx;
}

.index-content-item {
  width: 1fr;
  height: auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
}

.index-content-item image {
  width: 200rpx;
  height: 200rpx;
  border-radius: 20rpx;
}

.index-grid-title {
  color: #010101;
  margin-top: 10rpx;
  font-weight: 500;
}

.index-venue-item .item-left image {
  width: 100%;
}
</style>
